<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <style>
        table{

        }
        table tr input{
            height: 30px;
            margin: 5px 5px;
            line-height: 30px;
        }
        table tr,.input_text{
            height: 30px;
            margin: 5px 5px;
            width: 200px;
        }
        table tr td{
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
<div id="text_show">
    需求<br/>
    创建一个个人信息注册的表单页面,包含用户名,密码,性别(单选),兴趣爱好(多选),国籍(下拉列表),隐藏域,自我评价(多行文本域),重置,提交<br/>
    <hr/>
    form标签就是表单<br/>
    <hr/>
    （1）input type="text"   是文本输入框  value设置默认的显示内容<br/>
    <hr/>
    （2）input type="password"    是密码输入框  value设置默认的显示内容<br/>
    <hr/>
    （3）input type="radio"   是单选框 name属性可以对其进行分组 checked="checked" 表示进行默认选中<br/>
    <hr/>
    （4）input type="checkbox"    是复选框 checked="checked" 表示默认选中<br/>
    <hr/>
    （5）input type="reset"   是重置按钮   value属性修改按钮上的文本<br/>
    <hr/>
    （6）input type="submit"  是提交按钮   value属性修改按钮上的文本<br/>
    <hr/>
    （7）input type="button"  是按钮      value属性修改按钮上文本<br/>
    <hr/>
    （8）input type="file"    是文件上传域<br/>
    <hr/>
    （9）input type="hidden"  是隐藏域   当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器1)<br/>
    <hr/>
    （10）select 标签是下拉列表框<br/>
        option 标签是下拉列表框中的选项 selected="selected" 设置默认选中<br/>
    <hr/>
    （11）textarea 表示多行文本输入框(其实标签和结束标签的内容是默认值)<br/>
        rows 属性设置可以显示几行的高度<br/>
        cols 属性设置每行可以显示几个字符宽度<br/>
    <hr/>

</div>

<form action="">
    <h1 align="center">用户注册</h1>
    <table width="800" cellspacing="0" align="center">
        <tr>
            <td>用户名称：</td>
            <td>
                <input type="text" value="樊振东" class="input_text"/>
            </td>
        </tr>

        <tr>
            <td>用户密码：</td>
            <td>
                <input type="password" value="123456" class="input_text"/>
            </td>
        </tr>

        <tr>
            <td>确认密码：</td>
            <td>
                <input type="password" value="123456" />
            </td>
        </tr>

        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" />男
                <input type="radio" />女
            </td>
        </tr>

        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked">Java
                <input type="checkbox" checked="checked">JavaScript
                <input type="checkbox" checked="checked">php
            </td>
        </tr>

        <tr>
            <td>国籍：</td>
            <td>
                <select name="" id="">
                    <option value="0">---请选择国籍---</option>
                    <option value="中国" selected>中国</option>
                    <option value="美国">美国</option>
                    <option value="日本">日本</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>自我评价：</td>
            <td>
                <textarea name="" id="introduce" cols="30" rows="10">默认介绍</textarea>
            </td>
        </tr>

        <tr align="center">
            <td colspan="2"><input type="reset" value="重置" > <input type="submit" value="提交"></td>
        </tr>






    </table>
</form>
<div class="look_source_code" onclick="getPageContent()">查看源码</div>
</body>
</html>